<template>
  <div id="app">
    分页
    <!-- total 总条数 pager-count 最多按钮数量(奇数)  .sync父子组件同步数据语法糖 -->
    <my-pagination
      :total="10"
      :pager-count="7"
      :current-page.sync="currentPage"
    >
    </my-pagination>
    <hr>
    表格
    <my-table 
      :columns="columns1" 
      :data="data1"
      @on-select="select"
      @on-select-all="selectAll"
      @on-sort-change="change"
      height="300px"
    >
    <template slot="name" slot-scope="{row,col}">
      <!-- 作用域插槽接收值 -->
      <h1>{{row[col.key]}}</h1>
    </template>
    <template slot="action" >
      <my-button>删除</my-button>
    </template>
    </my-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
        currentPage:6,
        columns1: [
          {
            type:'selection',
            width:60
          },
          {
              title: 'Name',
              key: 'name',
              slot: 'name'
          },
          {
              title: 'Age',
              key: 'age',
              sortable:true,// 默认排序 排序方法 'custom'(远程排序)
              sortType:'asc',// 默认升序
              //sortMethod(){}//自定义排序方法
          },
          {
              title: 'Address',
              key: 'address'
          },
          {
              title:'操作',
              slot:'action',
              key:'operator'
          }
        ],
        data1: [
            {
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03'
            },
            {
                name: 'Jim Green',
                age: 24,
                address: 'London No. 1 Lake Park',
                date: '2016-10-01'
            },
            {
                name: 'Joe Black',
                age: 30,
                address: 'Sydney No. 1 Lake Park',
                date: '2016-10-02'
            },
            {
                name: 'Jon Snow',
                age: 26,
                address: 'Ottawa No. 2 Lake Park',
                date: '2016-10-04'
            }
        ]
    }
  },
  methods:{
    select(selection,row){
      console.log(selection,row)
    },
    selectAll(selection){
      console.log(selection)
    },
    change({col,type}){
      console.log(col,type)
    }
  }
}
</script>

<style lang="scss">

</style>
